<template>
  <div class="home">
    <div class="body">
      <div class="title">账实核对</div>
      <div class="cont" style="text-align: center;overflow: hidden;">
        <div class="main" v-if="check == 0">
          <div class="tit">重量</div>
          <div class="weight">
              <el-input type="text" style="margin-right:10px;font-size:30px; width:250px"
                        @keyup.enter.native="weightTagEnter"
                        ref="refWeight"
                        v-model="weightTag"/>千克</div>
          <div class="but" v-show="weightShow">
            <el-button
              type="primary"
              style="width:200px;height:54px;font-size:28px;margin-left: 170px;"
              @click="scanningBar"
            >扫描料框</el-button>
            <input
                type="text"
                ref="barCode"
                @keyup.enter="barCodeEnter"
                v-model="barCode"
                style="opacity: 1;z-index=-1;"
                />
          </div>
        </div>
        <div class="table-w" v-if="check == 1">
            <table class="detail">
                <tr>
                    <td></td>
                    <td style="font-size:30px; font-weight:bold;"></td><!-- 框内物料 -->
                    <td style="font-size:20px; text-align:right">料框号：{{barCode}}</td>
                </tr>
                <tr>
                    <td>厂家：{{customerName}}</td>
                    <td>款式：{{styleName}}</td>
                    <td>物料种类：{{stockStr4}}</td>
                </tr>
                <tr>
                    <td>登记重量：{{stockWeight+'千克'}}</td>
                    <td></td>
                    <td>实重：{{weightTag+'千克'}}</td>
                </tr>
            </table>
          <el-table
            :data="listProduct"
            :row-style="tableRowStyle"
            :header-cell-style="tableHeaderColor"
            highlight-current-row
            style="width: 100%;font-size:16px;"
            height="12rem"
          >
            <el-table-column label="序号" width="160" align="center">
              <template slot-scope="scope">{{scope.$index+1}}</template>
            </el-table-column>
            <el-table-column prop="MaterielName" label="名称" align="center"></el-table-column>
            <el-table-column prop="ColorConfigName" label="型号" width="240" align="center"></el-table-column>
            <el-table-column prop="SpecConfigName" label="规格" width="240" align="center"></el-table-column>
            <el-table-column prop="StockCount" label="数量" width="240" align="center">
                <template slot-scope="scope">{{scope.row.StockCount+scope.row.StockUnitName}}</template>
            </el-table-column>
            <el-table-column prop="StockStr10" label="重量(千克)" width="240" align="center">
                <template slot-scope="scope">{{(scope.row.StockStr10/1000).toFixed(3)}}</template>
            </el-table-column>
          </el-table>
          <div class="but">
            <el-button
              type="primary"
              style="width:200px;height:54px;font-size:28px;margin-top:10px;"
              @click="returnMain"
            >确认</el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Mixin from '@/components/mixin' // 混入
import {GetProductStockByBarCode} from '@/api/prison' // 接口
export default {
  name: 'lkcheck',
  data () {
    return {
      check: 0,
      listProduct: [],
      weightShow: false, // 是否显示扫描料框按钮
      weightTag: '',
      barCode: '', // 垛号编号
      customerName: '', // 厂家名称
      styleName: '', // 款式
      stockStr4: '', // 物料种类
      stockWeight: '' // 数据库总重量
    }
  },
  computed: {},
  components: {},
  mixins: [Mixin],
  methods: {
    // 修改table tr行的背景色
    tableRowStyle ({ row, rowIndex }) {
      return {
        backgroundColor: 'rgb(0, 63, 140)',
        color: '#fff',
        fontWeight: 'bold',
        height: '0.7rem',
        fontSize: '15px'
      }
    },
    // 修改table header的背景色
    tableHeaderColor ({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return 'background-color: rgb(0, 63, 140);color: #fff;font-weight: bold;height:0.7rem;font-size:15px'
      }
    },
    //
    weightTagEnter () {
      let vm = this
      if (vm.weightTag !== '') {
        vm.weightShow = true
        vm.$nextTick(() => {
          vm.$refs.barCode.focus()
        })
      } else {
        vm.$message('请录入重量')
      }
    },
    // 扫描料框
    scanningBar () {
      let vm = this
      vm.barCode = ''
      vm.$nextTick(() => {
        vm.$refs.barCode.focus()
      })
      // vm.barCode = '10001'
    },
    // 垛号回车查询明细
    barCodeEnter () {
      let vm = this
      let params = new FormData()
      params.append('BarCode', vm.barCode)
      GetProductStockByBarCode(params).then((response) => {
        if (response.data.result) {
          var info = response.data.data
            // 赋值
          vm.customerName = info.CustomerName
          vm.styleName = info.StyleName
          vm.stockStr4 = info.StockStr4
          if (info.StockWeight !== '') {
            vm.stockWeight = (parseFloat(info.StockWeight)).toFixed(2)
          }

          vm.listProduct = info.ProductDetail
            // 显示列表
          vm.check = 1
        }
      })
    },
    // 确认
    returnMain () {
      let vm = this
      vm.check = 0
      vm.weightTag = ''
      vm.weightShow = false
      vm.barCode = ''
      vm.$nextTick(() => {
        vm.$refs.refWeight.focus()
      })
    }
  },
  watch: {},
  mounted () {
    let vm = this
    vm.$nextTick(() => {
      vm.$refs.refWeight.focus()
    })
  },
  beforeDestroy: function () {}
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
@import "~@/css/lcheck/lkcheck.scss";
</style>
<style>
.el-input__inner{
    height:0.8rem;
}
</style>
